<template>
  <div id="studentSystem">
    <header><h1 @click='$router.push("/")'>Stu Managament</h1></header>
    <main>
      <aside>
        <div>
          <h3>学生管理</h3>
          <ul>
            <li><router-link to='/stuList' active-class='active'>学生列表</router-link></li>
            <li><router-link to='/addStu' active-class='active'>增加学生</router-link></li>
          </ul>
        </div>
        <div>
          <h3>教师管理</h3>
          <ul>
            <li><router-link to='/teachersList'>教师列表</router-link></li>
            <li><router-link to='/addTeacher'>增加教师</router-link></li>
          </ul>
        </div>
        <div>
          <h3>班级管理</h3>
          <ul>
            <li><router-link to='/classesList'>班级列表</router-link></li>
            <li><router-link to='/addClass'>增加班级</router-link></li>
          </ul>
        </div>
        <div>
          <h3>其他</h3>
          <ul>
            <li><router-link to='/counter'>点赞管理</router-link></li>
          </ul>
        </div>

      </aside>
      <section>
        <keep-alive>
          <router-view 
          v-if='$route.meta.keepAlive'/>    
        </keep-alive>
        <router-view v-if='!$route.meta.keepAlive'/>  
        
      </section>
    </main>
    <footer><h2>footer</h2></footer>  
  </div>
</template>

<script>
import axios from 'axios';


export default {
  data(){
    return{
      // studentData:{
      //   currentPage:1,
      //   pageSize:5,
      //   totalPage:0,
      //   totalStudent:0,
      //   students:[]
      // },
    }
  },
  methods:{
    
    
    //新增，修改，学生列表组件都要用！
    // async getStudents(){
    //   var {data} = await axios({
    //     url:'/students/getStudents',
    //     method:'get',
    //     params:{
    //       ...this.studentData,
    //       ...this.searchData,
    //       students:[]
    //     }
    //   });
    //   if(data.status){        
    //     //不想重设this.studentData数据
    //     this.studentData = {
    //       ...this.studentData,
    //       ...data.data,
    //     }
    //     console.log(data)
    //     // console.log(this.studentData)
    //     // console.log(this.studentData.students)
    //   }else{
    //     alert(data.message);
    //   }
    // },


  }
}
</script>

<style scoped>
div#studentSystem{
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
header{
  width:100%;
  line-height: 10px;
  padding: 10px 0;
  text-align: center;
  background-color:gray;
  color:wheat;
}
main{
  flex: 1;
  display: flex;
}
aside{
  width: 150px;
  border-right: 1px solid wheat;
}
section{
  flex: 1;
  display: flex;
  justify-content: center;
}
footer{
  width:100%;
  line-height: 5px;
  padding: 5px 0;
  text-align: center;
  background-color:gray;
  color:wheat;
}
.active{
  padding: 2px;
  border-radius: 100px;
  font-size: 1.2rem;
  font-weight: bold;
  color: wheat;
}
</style>
